<template>
  <div>
    <el-form :inline="true" :model="content" class="demo-form-inline">
      <el-form-item label="">
        <el-input
          v-model="content.filenumber"
          placeholder="档案号/姓名/手机号"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" round icon="el-icon-search" @click="onSubmit()"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-container>
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="mini"
        round
        @click="add()"
        >添加</el-button
      >
    </el-container>
    <el-table @selection-change="handleSelectionChange"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    :data="tableData">
      <el-table-column label="预约时间" width="180" >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.orderdate | returnDate
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="编号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.memberid
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.tmember_lcj.name }}</p>
            <p>
              性别：
              <span v-if="scope.row.tmember_lcj.sex == 2">女</span>
              <span v-if="scope.row.tmember_lcj.sex == 1">男</span>
            </p>
            <p>电话: {{ scope.row.tmember_lcj.phonenumber }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.tmember_lcj.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="预约类型" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ordertype }}</span>
        </template>
      </el-table-column>
      <el-table-column label="预约状态" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span v-if="scope.row.orderstatus == 0">未预约</span>
            <span v-if="scope.row.orderstatus == 1">已预约</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            round
            icon="el-icon-s-opportunity"
            @click="xq(scope.$index, scope.row)"
          >详情</el-button>

          <el-button
            type="warning"
            size="mini"
            round
            icon="el-icon-edit"
            v-if="scope.row.orderstatus == 0"
            @click="handleEdit(scope.$index, scope.row)"
          > 确认预约</el-button>

          <el-button
            type="danger"
            size="mini"
            round
            icon="el-icon-delete"
            v-if="scope.row.orderstatus == 1"
            @click="handleDelete(scope.$index, scope.row)"
          >取消预约</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="content.page"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="content.num"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form :model="form" class="form">
        <div style="float: left; height: 520px" class="dd1">
          <el-form-item label="搜索方式:" :label-width="formLabelWidth">
            <el-input
              v-model="form.name"
              autocomplete="off"
              style="width: 180px"
              size="mini"
              placeholder="档案号/姓名/手机号"
              @blur="byname()"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证:" :label-width="formLabelWidth">
            <el-input
              v-model="form.idcard"
              autocomplete="off"
              style="width: 180px"
              size="mini"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别:" :label-width="formLabelWidth">
            <el-radio-group v-model="form.sex" :disabled="true">
              <el-radio label="1">男</el-radio>
              <el-radio label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出身日期:" :label-width="formLabelWidth">
            <el-date-picker
              value-format="yyyy-MM-dd"
              type="date"
              v-model="form.birthday"
              style="width: 180px"
              size="mini"
              :disabled="true"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="手机号:" :label-width="formLabelWidth">
            <el-input
              v-model="form.phonenumber"
              autocomplete="off"
              style="width: 180px"
              size="mini"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="年龄:" :label-width="formLabelWidth">
            <el-input
              v-model="form.age"
              autocomplete="off"
              style="width: 180px"
              size="mini"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="预约日期:" :label-width="formLabelWidth">
            <el-date-picker
              value-format="yyyy-MM-dd"
              type="date"
              v-model="form.orderdate"
              style="width: 180px"
              size="mini"
            ></el-date-picker>
          </el-form-item>
        </div>
        <div style="width: 600px; margin-left: 300px">
          <el-form :inline="true" :model="content1" class="demo-form-inline">
            <el-form-item label="">
              <el-input
                v-model="content1.name"
                placeholder="检测套餐"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="onSubmit()"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <el-table @selection-change="handleSelectionChange" :data="tsetmeal">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="套餐名称" width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{ scope.row.name }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="适用人群" width="180">
              <template slot-scope="scope">
                <p>
                  <span v-if="scope.row.sex == 0">女</span>
                  <span v-if="scope.row.sex == 1">男</span>
                  <span v-if="scope.row.sex == 2">不限</span>
                </p>
              </template>
            </el-table-column>
            <el-table-column label="套餐介绍" width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{ scope.row.remark }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.remark }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="content1.page1"
            :page-sizes="[2, 3]"
            :page-size="content1.num1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totaltset">
          </el-pagination>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="clear: left;margin-right:350px;">
        <el-button round type="info" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button round type="primary" @click="updStu()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogForm" class="eldig">
      <el-form :model="form" class="form">
        <div style="margin-left: 200px">
          <el-table :data="tsetandmem">
            <el-table-column label="套餐名称" width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>套餐名：{{ scope.row.name }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="适用人群" width="180">
              <template slot-scope="scope">
                <p>
                  <span v-if="scope.row.sex == 0">女</span>
                  <span v-if="scope.row.sex == 1">男</span>
                  <span v-if="scope.row.sex == 2">不限</span>
                </p>
              </template>
            </el-table-column>
            <el-table-column label="套餐介绍" width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{ scope.row.remark }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.remark }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="content2.page2"
            :page-sizes="[2, 3, 5, 7]"
            :page-size="content2.num2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalmem"
          >
          </el-pagination>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);

export default {
  data() {
    return {
      loading:true,
      tableData: [],
      tsetmeal: [],
      tsetandmem:[],
      total: 0,
      totaltset: 0,
      totalmem:0,
      dialogFormVisible: false, //是否显示dialog，默认不显示
      dialogForm:false,
      form: {
        id: "",
        filenumber:"",
        name: "",
        phonenumber: "",
        idcard: "",
        sex: "",
        birthday: "",
        age: "",
        maritalStatus: "",
        orderdate: "",
        setmealid:"",
        ordercreatetime:"",
      },
      content: {
        page: 1,
        num: 2,
        filenumber: "",
      },
      content1: {
        page1: 1,
        num1: 3,
        name: "",
      },
       content2: {
        page2: 1,
        num2: 3,
        mid: "",
      },
      //loading: true,
      formLabelWidth: "80px",
      multipleSelection: [],
    };
  },
  methods: {
    //查询用户是否注册
    byname(){
      axios.get("/api/tmem/getByname?name="+this.form.name).then(data=>{
        if(data.data.id==0){
          this.form={};
          this.$message({
              type: 'info',
              message: '用户名重复，请更换其他方式！！'
             });
          }else{
            if(data.data==""){
            this.form={};
            this.$message({
                type: 'info',
                message: '用户不存在，请先注册！！'
              });
          }else{
            this.form=data.data;
          }
      }
        
      })
    },
    //添加
    add() {
      this.form = {};
      this.dialogFormVisible = true;
    },
    //表格复选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //多条件查询方法
    onSubmit() {
      this.load();
      this.load1();
    },
    handleEdit(index, row) {
      let upd = new Date();
      var y = upd.getFullYear();
      var m = (upd.getMonth() + 1).toString().padStart(2, "0");
      var d = upd.getDate().toString().padStart(2, "0");
      var tim = y + "-" + m + "-" + d;
      axios
        .get(
          "/api/torder/updMember?memberid=" +
            row.memberid +
            "&orderupdatetime=" +
            tim
        )
        .then((data) => {
          if (data.data == 1) {
            this.load();
          }
        });
    },
    //添加
    updStu() {
      //获取当前时间
      var dd = new Date();
      var y = dd.getFullYear();
      var m = (dd.getMonth() + 1).toString().padStart(2, "0");
      var d = dd.getDate().toString().padStart(2, "0");
      var tt= y + "-" + m + "-" + d;
      this.form.ordercreatetime=tt;

      let ids="";
       this.multipleSelection.forEach(item => {
         ids+=item.id+",";
      });
      if(this.form.orderdate<tt){
       this.$message({
           type: 'info',
           message: '预约时间不能小于当前时间，请重新选择！！'
            });
      }else{
    if(ids==""){
      this.$message({
           type: 'info',
           message: '您还未选择套餐，请选择！！'
            });
    }else{
     this.form.setmealid=ids;
      axios.post("/api/torder/addthree",this.form).then((data) => {
        if (data.data == 1) {
               this.$message({
                message: '恭喜你，添加成功！！！',
                type: 'success'
                });
          this.load();
        } else if(data.data==2){
                this.$message({
                  type: 'info',
                  message: '此日期预约数已满，请换其他日期！！'
                 });
            }else if(data.data==3){
              this.$message({
                  type: 'info',
                  message: '此日期还未设置预约人数，请先设置！！'
                 });
            }else{
              this.$message({
                  type: 'info',
                  message: '请先执行完您预约过的体检！！'
                 });
            }
      });
    }
  }
      this.dialogFormVisible = false;
    },

    //获取每页条数的方法
    handleSizeChange(val) {
      this.content.num = val;
      this.load();
    },
    //获取当前页的方法
    handleCurrentChange(val) {
      this.content.page = val;
      this.load();
    },
     //获取每页条数的方法
    handleSizeChange1(val) {
      this.content1.num1 = val;
      this.load1();
    },
    //获取当前页的方法
    handleCurrentChange1(val) {
      this.content1.page1 = val;
      this.load1();
    },
     //获取每页条数的方法
    handleSizeChange2(val) {
      this.content2.num2 = val;
      this.xq();
    },
    //获取当前页的方法
    handleCurrentChange2(val) {
      this.content2.page2 = val;
      this.xq();
    },
    //查询方法
    load() {
      axios.post("/api/torder/findAll", this.content).then((data) => {
        this.tableData = data.data.rows; //获取预约表分页数据
        this.total = data.data.total; //获取预约表总记录数

        //加载样式
        setTimeout(() => {
          this.loading=false;
        }, 1000);
      });
    },
    load1() {
      axios.post("/api/tsetmeal/findAll", this.content1).then((data) => {
        this.tsetmeal = data.data.rows; //获取套餐表分页数据
        this.totaltset = data.data.total; //获取套餐表总记录数
      });
    },
    //查看用户详情
    xq(index,row){
      this.dialogForm=true;
      this.content2.mid=row.memberid;
       axios.post("/api/tsetmeal/getById", this.content2).then((data) => {
        this.tsetandmem = data.data.rows; //获取套餐表分页数据
        this.totalmem = data.data.total; //获取套餐表总记录数
      });
      
    },
  },
  created() {
    this.load();
    this.load1();
  },
  filters: {
    returnDate: (aa) => {
      var dd = new Date(aa);
      var y = dd.getFullYear();
      var m = (dd.getMonth() + 1).toString().padStart(2, "0");
      var d = dd.getDate().toString().padStart(2, "0");
      return y + "-" + m + "-" + d;
    },
  },
};
</script>

<style lang="css" scoped>
.el-dialog {
  width: 70%;
  height: 70%;
}

.dd1 {
  border-right: 1px solid rgb(34, 3, 3);
}
</style>
<style>
.el-dialog {
  width: 70%;
  height: 70%;
}

.dd1 {
  border-right: 1px solid rgb(34, 3, 3);
}
</style>
